<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>高级事件处理</title>
</head>
<body>
    <script>
        function append() {
            $(document).ready(function () {
                var pageNum = 1;
                $('#more-photos').click(function (e) {
                    e.preventDefault();
                    var $link = $(this);
                    var url = $link.attr('href');
                    if (url) {
                        $.get(url, function (data) {
                            $('#gallery').append(data);
                        });
                        pageNum++;
                        if (pageNum < 20) {
                            $link.attr('href', 'pages/' + pageNum + '.html');
                        } else {
                            $link.remove();
                        }
                    }
                });
            });
        }

        function upate() {
            $(document).ready(function () {
                var pageNum = 1;
                $('#more-photos').click(function (e) {
                    e.preventDefault();
                    var $link = $(this);
                    var url = $link.attr('href');
                    if (url) {
                        $.get(url, function (data) {
                            $('#gallery').append(data);
                        });
                        pageNum++;
                        if (pageNum < 20) {
                            $link.attr('href', 'pages/' + pageNum + '.html');
                        } else {
                            $link.remove();
                        }
                    }
                });
            });
        }

        function hover() {
            $(document).ready(function () {
                $('div.photo').hover(function () {
                    $(this).find('.details').fadeTo('fast', .7);
                }, function () {
                    $(this).find('.details').fadeOut('fast');
                });
            });
        }

        function multiEvents() {
            $(document).ready(function () {
                $('div.photo').on('mouseenter mouseleave', function (e) {
                    var $details = $(this).find('.details');
                    if (e.type === 'mouseenter') {
                        $details.fadeTo('fast', .7);
                    } else {
                        $details.fadeOut('fast');
                    }
                });
            });
        }

        function toggle() {
            $(document).ready(function () {
                $('div.photo').on('mouseenter mouseleave', function (e) {
                    $(this).find('.details').toggleClass('entered', e.type === 'mouseenter');
                });
            });
        }

        function unfinished() {
            $(document).ready(function () {
                $('#gallery').on('mouseover mouseout', function (e) {
                    var $target = $(e.target).closest('div.photo');
                    var $details = $target.find('.details');
                    var $related = $(e.relatedTarget).closest('div.photo');
                    if (e.type === 'mouseover' && $target.length) {
                        $details.fadeTo('fast', .7);
                    } else if (e.type === 'mouseout' && !$related.length) {
                        $details.fadeOut('fast');
                    }
                });
            });
        }

        function delegate() {
            $(document).ready(function () {
                $('#gallery').on('mouseenter mouseleave', 'div.phote', function (e) {
                    var $details = $(this).find('.details');
                    if (e.type === 'mouseenter') {
                        $details.fadeTo('fast', .7);
                    } else {
                        $details.fadeOut('fast');
                    }
                });
            });
        }

        function delegateScope() {
            $(document).ready(function () {
                $(document).on('mouseenter mouseleave', 'div.photo', function (e) {
                    var $details = $(this).find('.details');
                    if (e.type === 'mouseenter') {
                        $details.fadeTo('fast', .7);
                    } else {
                        $details.fadeOut('fast');
                    }
                });
            });
        }

        function anonymous() {
            (function ($) {
                $(document).on('mouseenter mouseleave', 'div.photo', function (e) {
                    var $details = $(this).find('.details');
                    if (e.type === 'mouseenter') {
                        $details.fadeTo('fast', .7);
                    } else {
                        $details.fadeOut('fast');
                    }
                });
            })(jQuery);
        }

        function trigger() {
            $(document).ready(function () {
                $('#more-photos').click(function (e) {
                    e.preventDefault();
                    $(this).trigger('nextPage');
                });
            });
        }

        function customEvents() {
            (function ($) {
                $(document).on('nextPage', function () {
                    var url = $('#more-photos').attr('href');
                    if (url) {
                        $.get(url, function (data) {
                            $('#gallery').append(data);
                        });
                    }
                });

                var pageNum = 1;
                $(document).on('nextPage', function () {
                    pageNum++;
                    if (pageNum < 20) {
                        $('#more-photos').attr('href', 'pages/' + pageNum + '.html');
                    } else {
                        $('#more-photos').remove();
                    }
                })
            })(jQuery);
        }

        function scrollSpy() {
            (function ($) {
                function checkScrollPosition() {
                    var distance = $(window).scrollTop() + $(window).height();
                    if ($('#container').height() <= distance) {
                        $(document).trigger('nextPage');
                    }
                }

                $(document).ready(function () {
                    $(window).scroll(checkScrollPosition).trigger('scroll');
                })
            })(jQuery);
        }

        function customEventParameters() {
            (function ($) {
                function checkScrollPosition() {
                    var distance = $(window).scrollTop() + $(window).height();
                    if ($('#container').height() <= distance) {
                        $(document).trigger('nextPage');
                    }
                }

                $(document).on('nextPage', function (e, scrollToVisible) {
                    var url = $('#more-photos').attr('href');
                    if (url) {
                        $.get(url, function (data) {
                            var $data = $(data).appendTo('#gallery');
                            if (scrollToVisible) {
                                var newTop = $data.offset().top();
                                $(window).scrollTop(newTop);
                            }
                            checkScrollPosition();
                        });
                    }
                });
            })(jQuery);
        }

        function parameters() {
            (function ($) {
                function checkScrollPosition() {
                    var distance = $(window).scrollTop() + $(window).height();
                    if ($('#container').height() <= distance) {
                        $(document).trigger('nextPage');
                    }
                }

                $('#more-photos').click(function () {
                    $(this).trigger('nextPage', [true]);
                    return false;
                });

                $(window).scroll(checkScrollPosition).trigger('scroll');
            })(jQuery);
        }

        function throttling() {
            $(document).ready(function () {
                function checkScrollPosition() {
                    var distance = $(window).scrollTop() + $(window).height();
                    if ($('#container').height() <= distance) {
                        $(document).trigger('nextPage');
                    }
                }

                var timer = 0;
                $(window).scroll(function () {
                    if (!timer) {
                        timer = setTimeout(function () {
                            checkScrollPosition();
                            timer = 0;
                        }, 250);
                    }
                }).trigger('scroll');
            });
        }

        function scrolling() {
            $(document).ready(function () {
                function checkScrollPosition() {
                    var distance = $(window).scrollTop() + $(window).height();
                    if ($('#container').height() <= distance) {
                        $(document).trigger('nextPage');
                    }
                }

                var scrolled = false;
                $(window).scroll(function () {
                    scrolled = true;
                });
                setInterval(function () {
                    if (scrolled) {
                        checkScrollPosition();
                        scrolled = false;
                    }
                }, 250);
                checkScrollPosition();
            });
        }

        function eventExtensions() {
            (function () {
                $.event.special.throttledScroll = {
                    setup: function (data) {
                        var timer = 0;
                        $(this).on('scroll.throttledScroll', function (e) {
                            if (!timer) {
                                timer = setTimeout(function () {
                                    $(this).triggerHandler('throttledScroll');
                                    timer = 0;
                                }, 250);
                            }
                        });
                    },
                    teardown: function () {
                        $(this).off('scroll.throttledScroll');
                    }
                }
            })(jQuery);
        }
    </script>
</body>
</html>